<template>
	<view class="kui-w-full kui-h-full">
		<kui-page :custom-header="false">
			<template v-slot:body>
				<view class="kui-w-full kui-h-full">
					<kui-space :gap="[30,0]" direction="column">
						<kui-cell-group title="基本用法">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch ref="baseSwitch" v-model="baseState.state.checked"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="禁用状态">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch v-model="baseState.state.checked" :disabled="true"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="加载状态">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch v-model="baseState.state.checked" :loading="true"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="change监听">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch v-model="baseState.state.checked" @change="baseState.methods.onChange"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="异步控制">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch :model-value="asyncState.state.checked" @change="asyncState.methods.onChange"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="自定义颜色">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch active-color="#FF6600" v-model="baseState.state.checked"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="文字描述">
							<kui-cell :show-right-icon="false" :click-status="false">
								<template v-slot:content>
									<kui-switch :active-text="baseState.state.activeText" :inactive-text="baseState.state.inactiveText" v-model="baseState.state.checked"></kui-switch>
								</template>
							</kui-cell>
						</kui-cell-group>
					</kui-space>
				</view>
			</template>
		</kui-page>
		<kui-toast v-model:show="toastState.state.show" :content="toastState.state.content"></kui-toast>
	</view>
</template>

<script lang="ts">
	import {
		reactive
	} from 'vue';
	
	export default {
		setup() {
			const toastState = {
				state: reactive({
					show: false,
					content: ''
				}),
			};
			const baseState = {
				state: reactive({
					checked: true,
					activeText: '是',
					inactiveText: '否'
				}),
				methods: {
					onChange(e) {
						// console.log(e);
						toastState.state.content = JSON.stringify(e);
						toastState.state.show = true;
					}
				}
			};
			
			const asyncState = {
				state: reactive({
					checked: true
				}),
				methods: {
					onChange(e) {
						console.log(`async:${e}`);
						// asyncState.state.checked = e;
						const desc = e ? '打开' : '关闭';
						toastState.state.content = `2s后开关${desc}`;
						toastState.state.show = true;
						
						setTimeout(() => {
							asyncState.state.checked = e;
						}, 2000);
					}
				}
			};
			
			return {
				toastState,
				baseState,
				asyncState
			}
		}
	}
</script>

<style>

</style>
